import { menu } from '../../../app/decorator';
import BaseColorShap from './base/BaseColorShap';

const { ccclass, property, disallowMultiple, executeInEditMode } = cc._decorator;

@ccclass
@menu(__filename, '环形')
@disallowMultiple()
@executeInEditMode()
export default class ColorShapRing extends BaseColorShap {

    @property
    _allAngle: number = 360;
    @property({
        type: cc.Float,
        range: [1, 360, 0.1],
        slide: true,
        tooltip: CC_DEV && '总角度值',
    })
    get allAngle() { return this._allAngle; }
    set allAngle(value) {
        this._allAngle = value;
        this.updateColorShap();
    }

    /**
     * !#en The current progress of the bar sprite. The valid value is between 0-1.
     * !#zh 当前进度值，该数值的区间是 0-1 之间。
     * @property {Number} progress
     */
    @property
    _progress: number = 1;
    @property({
        type: cc.Float,
        range: [0, 1, 0.1],
        slide: true,
        animatable: true,
        tooltip: CC_DEV && '当前进度值，该数值的区间是 0-1 之间',
    })
    get progress() { return this._progress; }
    set progress(value) {
        this._progress = value;
        this.updateColorShap();
    }

    /**
     * !#en Whether reverse the progress direction of the bar sprite.
     * !#zh 进度条是否进行反方向变化。
     * @property {Boolean} reverse
     */
    @property
    _reverse: boolean = false;
    @property({
        tooltip: CC_DEV && '进度条是否进行反方向变化',
        animatable: false
    })
    get reverse() { return this._reverse; }
    set reverse(value) {
        this._reverse = value;
        this.updateColorShap();
    }

    constructor() {
        super();
        this._needLineCap = true;
    }

    /**
     * 需要重写
     */
     onDraw(ctx: cc.Graphics, centerX: number, centerY: number) {
        if (this.allAngle <= 0 || this.allAngle > 360) {
            return;
        }
        const r = Math.min(this.node.width / 2, this.node.height / 2);

        const allPI = this.allAngle / 360 * Math.PI;
        const offst = (360 - this.allAngle) / 360 * Math.PI;

        if (this.reverse) {
            const start = 0.5 * Math.PI + offst;
            const end = 0.5 * Math.PI + this.progress * 2 * allPI + offst;
            ctx.arc(centerX, centerY, r, start, end, true);
        } else {
            const start = 0.5 * Math.PI - offst;
            const end = 0.5 * Math.PI - this.progress * 2 * allPI - offst;
            ctx.arc(centerX, centerY, r, start, end, false);
        }

        if (this.renderType === BaseColorShap.RenderType.fill) {
            ctx.lineTo(centerX, centerY);
        }
    }
}
